<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax</title>
	<style>
          .profile{
          	width: 450px;
          	margin:0 auto;
          	border:2px solid #ccc;
          	min-height: 300px;
          }
.kuang{
	   margin: 0 auto;
     text-align: center;
     width:400px;
     height: 50px;
}

select{
   height:30px;
   width: 80px;
   text-align: center;

}
option{
  float: left;
  text-align: center;

}
</style>
</head>
<body>
	<div class="profile">
	    <p><span>姓名：</span><span id="sname"></span></p>
	    <p><span>年龄：</span><span id="sage"></span></p>
	    <p><span>朋友：</span><span id="sfriends"></span></p>

	</div>

  <div class="kuang">
  省<select id="province">
     <option>广西</option>
   
    
  </select>
    市<select id="city">
       <option>柳州</option>
  </select>

  区<select id="area">
      <option>城中</option>
  </select>
</div>







<script type="text/javascript" src="js/jquery3.js"></script>
<script>
       $.get('stud.json',function(res){
          $('#sname').text(res.name);
          $('#sage').text(res.age);

          var f="";

          for(var i = 0; i < res.friends.length; i++){
          	f +=res.friends[i].name+"";
          }
          $('#sfriends').text(f);
          

       })
 $.get('province.json',function(res){

    $('#province').empty();

    for(var i = 0; i < res.length; i++){
        $('#province').append('<option>'+res[i].name+'</option>');
    }

 })
 
 $.get('city.json',function(res){

    $('#city').empty();

    for(var i = 0; i < res.length; i++){
        $('#city').append('<option>'+res[i].name+'</option>');
    }

 })

 $.get('area.json',function(res){

    $('#area').empty();

    for(var i = 0; i < res.length; i++){
        $('#area').append('<option>'+res[i].name+'</option>');
    }

 })
   $('#province').change(function(){
     console.log('+++');
  

   });
   $("#province",function(){
     var pid= $(this).val();
     var tmp=[];

   $.get('city.json',function(res){
    for (var i = 0; i <res.length; i++) {
      if(pid===res[i].pid){
        tmp.push(res[i]);
      }
}
   })
})


</script>
</body>
</html>